<template>
  <view>
    <TnNavbar fixed back-icon="" home-icon="" :center="false">
      <view class="tn-pl-sm tn-pr-xs tn-flex items-center justify-between" style="height: 100%;position: relative">
        <image @click="tn" :src="pmAvatar" style="width: 65rpx; height: 65rpx;border-radius: 100%"></image>
        <input
            style="border: 1px solid #eee; height: 65rpx; border-radius: 65rpx;width: calc(100% - 75rpx);padding-left: 50rpx;"
            placeholder="请输入搜索内容"
            confirm-type="search"
            @confirm="search"
            v-model="where.kinddes"
        >
        <tn-icon name="search" style="position: absolute;left: 110rpx; top: 50%; transform: translateY(-50%)"></tn-icon>
      </view>
    </TnNavbar>
    <view class="flex align-center margin">
      <view
          @click="changeTab(item)"
          v-for="item in tabsData"
          class="cu-tag bg-blue radius padding" :class="item.value !==  where.tab ? 'light' : ''">
        {{ item.text }}
      </view>
    </view>
    <scroll-view
        scroll-y
        :style="{height: `calc(100vh - ${height + safeBottom + 45}px)`}"
        :scroll-into-view="topItem"
        scroll-with-animation
        @scroll="handleScroll"
    >
      <view id="top"></view>
<!--      <view class="article-shadow tn-m">-->
<!--        <ad-custom unit-id="adunit-2982cfdd50237775"></ad-custom>-->
<!--      </view>-->
      <view>
        <block v-for="(item, index) in list" :key="item.id">
          <view class="article-shadow tn-m">
            <view class="tn-flex">
              <view class="tn-m-sm tn-pt-xs flex" style="width: 100%;">
                <!--                <view v-if="item.monster">-->
                <!--                  <image style="height: 100%; width: 90px"-->
                <!--                         :src="'https://seerh5.61.com/resource/assets/pet/head/' + item.monster + '.png'"></image>-->
                <!--                </view>-->
                <view>
                  <view class="tn-text-lg tn-text-bold clamp-text-1 tn-flex items-center">
                    <image v-if="item.icon" :src="item.icon" style="width: 23px; height: 23px;margin-right: 5px"></image>
                    <image v-else-if="item.monster" style="height: 23px; width: 23px;margin-right: 5px"
                           :src="'https://seerh5.61.com/resource/assets/pet/head/' + item.monster + '.png'"></image>
                    <text>{{ item.kinddes }}</text>
                  </view>
                  <view class="tn-pt-xs" style="min-height: 100rpx;">
                    <text class="text-gray" user-select>
                      {{ item.desc }}
                    </text>
                  </view>
                  <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-mt-xs">
                    <view
                        class="justify-content-item tn-tag-content__item tn-mr tn-round tn-text-sm tn-text-bold"
                        :class="item.tab === 1 ? 'bg-red light' : item.tab === 2 ? 'bg-blue light' : item.tab === 3 ?
                        'bg-green light' : 'bg-pink light'"
                    >
                      <text class="tn-tag-content__item--prefix">#</text>
                      {{ abnormalTab(item.tab) }}
                    </view>
                    <view
                        v-if="item.elf_name"
                        class="justify-content-item tn-tag-content__item tn-mr tn-round tn-text-sm tn-text-bold bg-orange light"
                    >
                      <text class="tn-tag-content__item--prefix">#</text>
                      {{ item.elf_name }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
      <view class="back" :style="{display: scrollTop > 500 ? 'flex' : 'none'}" @click.stop="scrollToTop">
        <TnIcon name="totop-simple" style="font-size: 25px"/>
      </view>
      <view class="tn-flex-center" v-if="list.length > 0">
        <TnButton text @click="loadMore" debounce :disabled="showLoading">
          {{ status === 'loadmore' ? '点击加载更多' : status === 'loading' ? '正在加载' : '到底啦~' }}
        </TnButton>
      </view>
    </scroll-view>
    <loading-page :show="showLoading" @click.stop=""/>
  </view>
</template>

<script setup>
  import {ref, reactive, getCurrentInstance, onMounted, computed, nextTick} from 'vue'
  import {useUniAppSystemRectInfo} from "../../uni_modules/tuniaoui-vue3/hooks/use-uniapp-system-rect-info";
  import TnButton from "../../uni_modules/tuniaoui-vue3/components/button/src/button.vue";
  import LoadingPage from "../../components/loadingPage.vue";
  import TnIcon from "../../uni_modules/tuniaoui-vue3/components/icon/src/icon.vue";
  import TnNavbar from "../../uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue";
  import {abnormalTab} from "../../utils/utils.js"

  const pmAvatar = __wxConfig.accountInfo.icon
  const {height} = useUniAppSystemRectInfo().navBarInfo
  const safeBottom = ref(0)

  const tabsData = [
    {
      value: 0,
      text: '全部'
    },
    {
      value: 2,
      text: '弱化类'
    },
    {
      value: 1,
      text: '控制类'
    },
    {
      value: 3,
      text: '附属类'
    },
    {
      value: 4,
      text: '其它'
    }
  ]

  // 初始数据
  const list = ref([])
  // 分页数据
  const where = reactive({
    page: 1,
    limit: 60,
    kinddes: '',
    tab: 0,
    sort: 'id',
    order: 'desc'
  })
  const showLoading = ref(false)
  const totalPages = ref(0)
  const {proxy} = getCurrentInstance()
  const getList = async () => {
    showLoading.value = true;
    if (where.page === 1) {
      ({records: list.value, pages: totalPages.value} = await proxy.$api.getAbnormalStatusQuery(where))
    } else {
      const {records} = await proxy.$api.getAbnormalStatusQuery(where)
      list.value.push(...records)
    }
    showLoading.value = false
  }

  // 触底触发
  const loadMore = async () => {
    if (status.value === 'loading') return
    if (status.value === 'loadmore') {
      where.page++
      await getList()
    } else {
      showLoading.value = false
    }
  }

  // 滚动触发
  const scrollTop = ref(0)
  const topItem = ref('')
  const handleScroll = (ev) => {
    scrollTop.value = ev.detail.scrollTop
    topItem.value = ''
  }

  // 返回顶部
  const scrollToTop = () => {
    nextTick(() => {
      topItem.value = 'top'
      scrollTop.value = 0
    })
  }

  // 搜索
  const search = async () => {
    where.page = 1
    await getList()
    scrollToTop()
  }

  const changeTab = (item) => {
    where.tab = item.value
    where.kinddes = ''
    search()
  }

  const status = computed(() => {
    if (showLoading.value) {
      return 'loading'
    } else if (where.page < totalPages.value) {
      return 'loadmore'
    } else {
      return 'nomore'
    }
  })

  const tn = () => {
    uni.navigateBack()
  }

  onMounted(async () => {
    uni.getSystemInfo({
      success: res => {
        safeBottom.value = res.safeAreaInsets.bottom
      }
    });
    await getList()
  })
</script>


<style scoped lang="scss">
  .article-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }

  /* 文字截取*/
  .clamp-text-1 {
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .clamp-text-2 {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /* 标签内容 start*/
  .tn-tag-content {
    &__item {
      display: inline-block;
      line-height: 35rpx;
      padding: 5rpx 25rpx;

      &--prefix {
        padding-right: 10rpx;
      }
    }
  }

  /* 标签内容 end*/

  .back {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, .4);
    color: #fff;
    position: fixed;
    right: 5px;
    bottom: 120px;
    z-index: 10001;
  }
</style>
